import React, { Component } from 'react';
import IndexSwiper from '../../components/Index/IndexSwiper/IndexSwiper';
import IndexNavList from '../../components/Index/IndexNavList/IndexNavList';
import IndexSearch from '../../components/Index/IndexSearch/IndexSearch';
import IndexNotice from '../../components/Index/IndexNotice/IndexNotice';
import './Index.less';

export default class Index extends Component {

    constructor(props) {
        super(props);
        this.state = {
            navList: [
                { id: 1, title: '搭建团队', img: require('../../images/home3.png'), url: '/partner/add' },
                { id: 2, title: '我的团队', img: require('../../images/home4.png'), url: '/team' },
                { id: 3, title: '用户报件', img: require('../../images/home5.png'), url: '/task' },
                { id: 4, title: '用户状态', img: require('../../images/home6.png'), url: '/status' }
            ],
            swiperList: [
                { id: 1, imgUrl: require('../../images/banner1.png') },
                { id: 2, imgUrl: require('../../images/banner2.png') },
                { id: 3, imgUrl: require('../../images/banner3.png') }
            ],
            notice: ''
        };

        this.fetchSwiperData();
        this.fetchNoticeData();
    }

    fetchSwiperData() {
        React.$utils.request({
            url: '/app/bannerList'
        }).then(res => {
            if (res.length >= 2) {
                this.setState({
                    swiperList: res
                })
            }
        })
    };

    fetchNoticeData() {
        React.$utils.request({
            url: '/app/noticeList'
        }).then(res => {

            this.setState({
                notice: res.map((item, index) => {
                    return (
                        <span key={index} style={{ marginRight: index === res.length - 1 ? '0' : '1rem' }}>
                            {item.content}
                        </span>
                    )
                })
            })
        })
    };

    render() {
        return (
            <div className='index'>
                <div className='index-bg'></div>
                <div className='index-content'>
                    <IndexSearch />
                    <IndexSwiper list={this.state.swiperList} />
                    <IndexNotice info={this.state.notice} />
                    <IndexNavList list={this.state.navList} />
                </div>
            </div>
        );
    }
}